@extends('admin.layout.layout', ['row' => @$page])

@section('title', @$page['title'])

@section('contain')
    <link rel="stylesheet" href="/dist/admin/stat.css">
    <div class="container stat-container" style="max-width: 1300px;">
        <a href="/admin/stat_compare/warranty_total">
        <div class="widget-container">
            <div class="widget-content-container" style="">
                <h6 class="card-title">今年|累计质保数量</h6>
                <h6 class="card-subtitle mb-2 text-muted">{{ date('Y') . '/1/1'  }}~{{ date('Y/m/d') }}</h6>
                <p class="card-text">今年</p>
                <p><span style="font-size: 2rem;">{{ $warranty_total }}</span>&nbsp;&nbsp;个</p>
                <p class="show-percent">同比 <span style="color:#95F204">{{ $warranty_rate }}%</span> 环比 <span style="color:#95F204">{{ $warranty_hb_rate }}%</span></p>
            </div>
        </div>
        </a>
        <a href="/admin/stat_compare/warranty_num?type=1">
        <div class="widget-container">
            <div class="widget-content-container" style="">
                <h6 class="card-title">今年|累计漆膜质保数量</h6>
                <h6 class="card-subtitle mb-2 text-muted">{{ date('Y') . '/1/1'  }}~{{ date('Y/m/d') }}</h6>
                <p class="card-text">今年</p>
                <p><span style="font-size: 2rem;">{{ $roll_1_total }}</span>&nbsp;&nbsp;个</p>
                <p class="show-percent">同比 <span style="color:#95F204">{{ $roll_1_rate }}%</span> 环比 <span style="color:#95F204">{{ $roll_1_hb_rate }}%</span></p>
            </div>
        </div>
        </a>
        <a href="/admin/stat_compare/warranty_num?type=2">
        <div class="widget-container">
            <div class="widget-content-container" style="">
                <h6 class="card-title">今年|累计窗膜质保数量</h6>
                <h6 class="card-subtitle mb-2 text-muted">{{ date('Y') . '/1/1'  }}~{{ date('Y/m/d') }}</h6>
                <p class="card-text">今年</p>
                <p><span style="font-size: 2rem;">{{ $roll_2_total }}</span>&nbsp;&nbsp;个</p>
                <p class="show-percent">同比 <span style="color:#95F204">{{ $roll_2_rate }}%</span> 环比 <span style="color:#95F204">{{ $roll_2_hb_rate }}%</span></p>
            </div>
        </div>
        </a>
        <a href="/admin/stat_compare/warranty_roll?film_type_id={{ $film_type_id }}">
        <div class="widget-container">
            <div class="widget-content-container" style="">
                <h6 class="card-title">今年|最佳单品质保数量</h6>
                <h6 class="card-subtitle mb-2 text-muted">{{ date('Y') . '/1/1'  }}~{{ date('Y/m/d') }}</h6>
                <p class="card-text">今年</p>
                <p><span style="font-size: 2rem;">{{ $roll_warranty_total }}</span>&nbsp;&nbsp;个</p>
                <p class="show-percent">同比 <span style="color:#95F204">{{ $roll_warranty_rate }}%</span> 环比 <span style="color:#95F204">{{ $roll_warranty_hb_rate }}%</span></p>
            </div>
        </div>
        </a>
        <div style="width: 50%;float: left; padding: 5px 10px;">
            <div style="float: left; width: 20%;">
                <button type="button" class="btn btn-secondary" id="all_country">全国</button>
            </div>
            <div style="float: left; width: 40%;">
                <div class="input-group mb-3 custom-control-inline">
                    <div class="input-group-prepend">
                        <span class="input-group-text">省代</span>
                    </div>
                    <select class="form-control" style="width: 60%" id="distributions">
                        <option selected disabled value="">选择省代</option>
                        @if (!empty($distributions))
                            @foreach($distributions as $distribution)
                                <option value="{{ $distribution->id }}">{{ $distribution->abbr }}</option>
                            @endforeach
                        @endif
                    </select>
                </div>
            </div>
            <div style="float: left; width: 40%;">
                <div class="input-group mb-3 custom-control-inline">
                    <div class="input-group-prepend" style="width: 30%;">
                        <span class="input-group-text">经销商</span>
                    </div>
                    <select class="form-control" style="width: 70%" id="dealers">
                        <option selected disabled value="">选择经销商</option>
                    </select>
                </div>
            </div>
        </div>
        <div style="width: 50%;float: left; padding: 5px 10px;">
            <div class="input-group mb-3 custom-control-inline" style="float: left; width: 40%;">
                <div class="input-group-prepend">
                    <span class="input-group-text">年份</span>
                </div>
                <select class="form-control" style="width: 50%;" id="year">
                    @for ($i = date('Y'); $i >= 2016; $i--)
                        <option value="{{ $i }}">{{ $i }}</option>
                    @endfor
                </select>
            </div>
        </div>
        <div class="widget-container widget-container-show">
            <div class="widget-content-container">
                <div class="row show-title">
                    <div class="col">质保数量统计</div>
                    <div class="col" style="text-align: right;">
                        <a href="/admin/stat_compare/compareWarrantyDetail">
                            <span style="cursor: pointer">对比</span>
                        </a>
                        <span style="cursor: pointer;display: none;" id="return_warranty">返回</span>
                    </div>
                </div>
                <div class="show_line_area" id="brand_rank"></div>
            </div>
        </div>
        <div class="widget-container widget-container-show">
            <div class="widget-content-container">
                <div class="row show-title">
                    <div class="col">局部件与全车件对比</div>
                    <div class="col" style="text-align: right;">
                        <a href="/admin/stat_compare/compare_warranty_part">
                            <span style="cursor: pointer">对比</span>
                        </a>
                    </div>
                </div>
                <div class="show_line_area" id="model_rank"></div>
            </div>
        </div>
        <div class="widget-container widget-container-show">
            <div class="widget-content-container">
                <div class="row show-title">
                    <div class="col">漆膜质保卷数与订购产品卷数对比</div>
                    <div class="col" style="text-align: right;">
                        <a href="/admin/stat_compare/compare_warranty_order?type=1">
                            <span style="cursor: pointer">对比</span>
                        </a>
                    </div>
                </div>
                <div class="show_line_area" id="order_num"></div>
            </div>
        </div>
        <div class="widget-container widget-container-show">
            <div class="widget-content-container">
                <div class="row show-title">
                    <div class="col">窗膜质保卷数与订购产品卷数对比</div>
                    <div class="col" style="text-align: right;">
                        <a href="/admin/stat_compare/compare_warranty_order?type=2">
                            <span style="cursor: pointer">对比</span>
                        </a>
                    </div>
                </div>
                <div class="show_line_area" id="order_win_num"></div>
            </div>
        </div>
        <div class="widget-container widget-container-show">
            <div class="widget-content-container">
                <div class="row show-title">
                    <div class="col">车主地区分布统计</div>
                    <div class="col" style="text-align: right;">
                    </div>
                </div>
                <div class="show_line_area" id="dealer_area"></div>
            </div>
        </div>
        <br clear="all" />
    </div>
    </div>
@endsection
@section('script')
    <script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
    <script src="https://img.hcharts.cn/highmaps/modules/map.js"></script>
    <script type="text/javascript">
        $(function () {
            showBrand();
            showModel();
            showCarOwner();
            showOrder(1);
            showOrder(2);
            $("#year").on('change', function () {
                showBrand();
                showModel();
                showOrder(1);
                showOrder(2);
            });

            $("#return_warranty").on("click", function () {
                $(this).hide();
                showBrand();
            });

            $("#car_brand").select2();
            $("#distributions").select2();
            $("#dealers").select2();

            $("#distributions").on("change", function () {
                if ($("#distributions").val() == '' || typeof $("#distributions").val() == 'undefined') {
                    return;
                }
                $("#dealers").val('');
                    $("#all_country").removeClass('btn-secondary').addClass('btn-primary');
                request.post('/admin/ajax/getDealers', {
                    creator_id: $("#distributions").val(),
                    t: 1,
                }).then(function (d) {
                    console.log(d);
                    let data = d.data;
                    $("#dealers").empty().append('<option selected disabled value="">选择经销商</option>');
                    if (data != '' && data.length > 0) {
                        for (let i in data) {
                            $("#dealers").append('<option value="' + data[i]['value'] + '">'+ data[i]['label'] +'</option>');
                        }
                    }
                });
                showModel();
                showBrand();
                showOrder(1);
                showOrder(2);
            });

            $("#dealers").on('change', function () {
                $("#all_country").removeClass('btn-secondary').addClass('btn-primary');
                showBrand();
                showOrder(1);
                showOrder(2);
                showModel();
            });

            $("#all_country").on('click', function () {
                $("#distributions").val('').trigger('change');
                $("#dealers").val('').empty().append('<option selected disabled value="">选择经销商</option>');
                $(this).removeClass('btn-primary').addClass('btn-secondary');
                showBrand();
                showOrder(1);
                showOrder(2);
                showModel();
            });
        });

        function showBrand() {
            $.ajax({
                url: '/admin/stat/warranty_roll_type',
                type:'get',
                data: {year: $("#year").val(),
                    dist_id: $("#distributions").val(),
                    dealer_id: $("#dealers").val(),
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    let result = [];
                    if (typeof data.list == 'undefined' || data.list.length <= 0) {
                        data.list = [];
                    }
                    Highcharts.chart('brand_rank', {
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: ''
                        },
                        credits: {
                            enabled: false
                        },
                        xAxis: {
                            categories: [
                                '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
                            ]
                        },
                        yAxis: {
                            min: 0,
                            title: '',
                        },
                        tooltip: {
                            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                '<td style="padding:0"><b>{point.y} </b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },
                        plotOptions: {
                            column: {
                                dataLabels: {
                                    enabled: true,
                                }
                            },
                            series: {
                                cursor: 'pointer',
                                events: {
                                    click: function(event) {
                                        console.log(event);
                                        showAllSales(event.point.category, event.point.colorIndex);
                                    }
                                }
                            }
                        },
                        series: data.list
                    });
                }
            });

        }

        function showAllSales(index, type) {
            $.ajax({
                url: '/admin/stat/showWarrantyRolls',
                type: 'get',
                data: {
                    year: $("#year").val(),
                    month: index,
                    type: type,
                    dist_id: $("#distributions").val(),
                    dealer_id: $("#dealers").val(),
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    if (data.list == '' || typeof data.list == 'undefined') {
                        return;
                    }
                    let table = '<table class="table">';
                    table += '<thead><tr style="background-color: rgb(248, 248, 248);"><th>膜名称</th><th>卷数</th></tr></thead>';
                    for (let i in data.list) {
                        table += '<tr><td>' + data.list[i]['name'] + '</td><td>' + parseInt(data.list[i]['total']) + '</td></tr>';
                    }
                    table += '</table>';
                    $("#return_warranty").show();
                    $("#brand_rank").empty().addClass('show-over').append(table);
                }
            });
        }

        function showModel() {
            $.ajax({
                url: '/admin/stat/warranty_part',
                type:'get',
                data: {year: $("#year").val(),
                    dist_id: $("#distributions").val(),
                    dealer_id: $("#dealers").val(),
                    car_brand: $("#car_brand").val(),
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    let result = [];
                    if (typeof data.list == 'undefined' || data.list.length <= 0) {
                        data.list = [];
                    }

                    Highcharts.chart('model_rank', {
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: ''
                        },
                        credits: {
                            enabled: false
                        },
                        xAxis: {
                            categories: [
                                '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
                            ]
                        },
                        yAxis: {
                            min: 0,
                            title: '',
                        },
                        tooltip: {
                            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                '<td style="padding:0"><b>{point.y} </b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },
                        plotOptions: {
                            column: {
                                dataLabels: {
                                    enabled: true,
                                }
                            }
                        },
                        series: data.list
                    });
                }
            });

        }

        function showOrder(type) {
            $.ajax({
                url: '/admin/stat/warranty_order',
                type:'get',
                data: {year: $("#year").val(),
                    dist_id: $("#distributions").val(),
                    dealer_id: $("#dealers").val(),
                    car_brand: $("#car_brand").val(),
                    product_type_id: type,
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    let result = [];
                    if (typeof data.list == 'undefined' || data.list.length <= 0) {
                        data.list = [];
                    }

                    Highcharts.chart(type === 1 ? 'order_num' : 'order_win_num', {
                        chart: {
                            type: 'column'
                        },
                        title: {
                            text: ''
                        },
                        credits: {
                            enabled: false
                        },
                        xAxis: {
                            categories: [
                                '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
                            ]
                        },
                        yAxis: {
                            min: 0,
                            title: '',
                        },
                        tooltip: {
                            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                                '<td style="padding:0"><b>{point.y} </b></td></tr>',
                            footerFormat: '</table>',
                            shared: true,
                            useHTML: true
                        },
                        plotOptions: {
                            column: {
                                dataLabels: {
                                    enabled: true,
                                }
                            }
                        },
                        series: data.list
                    });
                }
            });

        }


        function showCarOwner() {
            $.ajax({
                url: '/admin/stat/roll_car_owner',
                type: 'get',
                data: {
                    year: $("#year").val(),
                    dist_id: $("#distributions").val(),
                    dealer_id: $("#dealers").val(),
                },
                dataType: 'json',
                success: function (data) {
                    console.log(data);
                    if (typeof data.list == 'undefined' || data.list.length <= 0) {
                        data.list = [];
                    }

                    Highcharts.setOptions({
                        lang: {
                            drillUpText: '< 返回 “{series.name}”'
                        }
                    });
                    $.getJSON('https://data.jianshukeji.com/jsonp?filename=geochina/china.json&callback=?', function(mapdata) {
                        var result = data.list;
                        console.log(result);
                        Highcharts.mapChart('dealer_area', {
                            title: {
                                text: ''
                            },
                            credits: {
                                enabled: false
                            },
                            mapNavigation: {
                                enabled: true,
                                buttonOptions: {
                                    verticalAlign: 'bottom'
                                }
                            },
                            colorAxis: {
                                min: 0,
                                minColor: '#fff',
                                maxColor: '#006cee',
                                labels:{
                                    style:{
                                        "color":"red","fontWeight":"bold"
                                    }
                                }
                            },
                            series: [{
                                data: result,
                                mapData: mapdata,
                                joinBy: ['name', 'province'],
                                name: '车主分布'
                            }]
                        });
                    });
                }
            });
        }
    </script>
@endsection
